<template>
    <div>
        <el-dialog center :title="info.win ? '添加商品分类' : '修改商品分类'" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="cateInfo" :rules="rules" ref="cateForm">
                <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="cateInfo.pid" placeholder="请选择上级分类">
                        <el-option label="顶级分类" :value="0"></el-option>
                        <el-option v-for="item in cateList" :key="item.id" :value="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="catename">
                    <el-input v-model="cateInfo.catename"></el-input>
                </el-form-item>
                <!-- 图片上传 -->
                <el-form-item label="图片" :label-width="formLabelWidth" v-if='cateInfo.pid != 0'>
                <!-- 图片上传组件 -->
                    <el-upload action="#" list-type="picture-card" :on-preview="onPreview" :on-remove="onRemove"
                        :on-change="changeFile" :file-list="fileList" :limit="1" :on-exceed="handleExceed" :auto-upload="false">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!-- 图片预览组件 -->
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="cateInfo.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入接口
import { cateAdd, cateInfo, cateEdit } from '../../request/api'
// 复制性函数
import { mapActions, mapGetters } from 'vuex'
export default {
    props: ['info'],
    data() {
        return {
            formLabelWidth: '120px',
            value: true,
            cateInfo: {
                pid: 0,
                catename: '',
                img: '',
                status: 1,
            },
            rules: {
                pid: [
                    { required: true, message: '请选择上级分类', trigger: 'blur' },

                ],
                catename: [
                    { required: true, message: '请选择分类名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ]
            },
            dialogVisible: false, //是否渲染图片弹框
            dialogImageUrl: "", //图片地址
            fileList: [],
        };
    },
    computed: {
        ...mapGetters({
            cateList: 'cate/getCateList'
        })
    },
    mounted() {
        this.cateListAction()
    },
    methods: {
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件`
            );
        },
        //文件修改时触发
        changeFile(file, filelist) {
            console.log(file, filelist, "change");
            this.cateInfo.img = file.raw;
        },
        // 图片预览
        onPreview(file) {
            console.log(file, '图片预览');
            //给预览图片赋值
            this.dialogImageUrl = file.url;
            //打开弹框
            this.dialogVisible = true;
        },
        // 删除图片
        onRemove(file, filelist) {
            console.log(file, filelist, '删除');
        },
        ...mapActions({
            cateListAction: 'cate/changeCateAction'
        }),
        //封装一个函数用来数据回显
        lookup(id) {
            // 调用查询接口
            cateInfo({ id })
                .then(res => {
                    console.log(res, '一条数据');
                    if (res.code == 200) {
                        this.cateInfo = res.list
                        this.cateInfo.id = id
                        this.fileList = res.list.img ? [{ url: this.$img + res.list.img }] : [];
                    }
                })
        },
        // 取消事件
        close() {
            this.$emit('close', false)
            // 清空
            this.reset()
        },
        // 封装一个重置事件
        reset(){
            this.cateInfo= {
                pid: 0,
                catename: '',
                img: '',
                status: 1,
            }
            // 清空表单验证
            this.$refs.cateForm.resetFields()
            //清空文件列表
            this.fileList = [];
        },
        // 确认按钮事件
        confirm() {
            this.$refs.cateForm.validate((flag => {
                if (flag) {
                    console.log(this.cateInfo, '表单信息');
                    if (this.info.win) {
                        // 添加接口
                        cateAdd(this.cateInfo)
                            .then(res => {
                                console.log(res, '分类添加');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 重新调用列表
                                    this.cateListAction()
                                    // 关闭弹窗
                                    this.close()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {
                        // 编辑接口
                        cateEdit(this.cateInfo)
                            .then(res => {
                                console.log(res, '分类编辑');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 重新调用列表
                                    this.cateListAction()
                                    // 关闭弹窗
                                    this.close()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }

                } else {
                    // 验证失败
                }
            }))
        }
    }
};
</script>

<style  lang="less" scoped>
</style>
